import React, {memo} from 'react';
import {View, Text, TouchableHighlight} from 'react-native';
import Colors from '../../utils/Colors';
import PatIcon from '../base/PatIcon';
import style from './CateFilterTop.style';
import {useTranslation} from 'react-i18next';

const filterArr = ['Categroy', 'Size', 'Sort', 'Filter'];

const Filterbox = ({select, onChange}) => {
  const {t} = useTranslation();
  return (
    <View style={style.filterbox}>
      {filterArr.map(item => {
        return (
          <TouchableHighlight
            key={item}
            activeOpacity={1}
            underlayColor={Colors.white}
            onPress={onChange(item)}>
            <View style={style.filterItem}>
              <Text
                style={select === item ? style.SelectTxt : style.filterItemTxt}>
                {item}
              </Text>
              <PatIcon
                name={select === item ? 'arrow-down' : 'arrow-up'}
                size={14}
                color={select === item ? Colors.red : Colors.patFontGray}
              />
            </View>
          </TouchableHighlight>
        );
      })}
    </View>
  );
};

export default memo(Filterbox);
